<script lang="ts" setup>
import { SiteFormModal } from '@/component/SiteFormModal/SiteFormModal.ts'
import UploadImage from '@/component/Upload/UploadImage.vue'
import type { ArcoForm } from '@/tool/ArcoFormTool.ts'
import { ref } from 'vue'

const props = withDefaults(
        defineProps<{
            groupId: string,
            isAdd?: boolean,
            site?: object
        }>(),
        {
            isAdd: false,
        },
)

const emits = defineEmits<{
    (event: 'change'): void
}>()

const formRef = ref<ArcoForm | null>(null)

const { isShow, show, formIsLoading, formSubmit, hide, formData, formRule } = new SiteFormModal(props, emits, formRef)

defineExpose({
    show,
    hide,
})

</script>

<template>
<div>
    <div @click="show">
        <slot name="trigger">
            <icon-plus />
        </slot>
    </div>

    <a-modal
            v-model:visible="isShow"
            :ok-loading="formIsLoading"
            :on-before-ok="formSubmit"
            draggable
            :title="isAdd ? '添加站点' : '修改站点'"
            @cancel="hide"
    >
        <a-form ref="formRef" :model="formData" :rules="formRule" scroll-to-first-error>
            <a-form-item field="icon" label="图标">
                <UploadImage v-model:uri="formData.icon" />
            </a-form-item>
            <a-form-item field="name" label="名称">
                <a-input v-model="formData.name" placeholder="网站名称" />
            </a-form-item>
            <a-form-item field="url" label="网址">
                <a-input v-model="formData.url" placeholder="https://examples.com" />
            </a-form-item>
            <a-form-item field="description" label="描述">
                <a-textarea v-model="formData.description" allow-clear placeholder="描述" />
            </a-form-item>
        </a-form>
    </a-modal>

</div>
</template>

<style lang="scss" scoped>

</style>
